<template>
    <ul class="card" :style="{ marginTop: '10px'}">
      <li v-for="(item, index) in dataList" :key="index">
        <span class="des" >{{ item.des }}</span>
        <div>
          <CountTo
            class="number"
            :endVal="item.num"
            :duration="1000"
            separator=""
          ></CountTo>
          <span
            class="change"
            :style="{ color: item.change.indexOf('+') === -1 ? 'red' : '#52c41a' }"
          >
            {{ item.change }}
          </span>
        </div>
        <i class="iconfont " :style="{ backgroundImage: `${item.color} !important` }">{{
        item.icon
      }}</i>
      </li>
    </ul>
  </template>

<script setup lang="ts">
import { reactive } from 'vue'
import { CountTo } from 'vue3-count-to'
import { defineProps, watch } from 'vue';

const props = defineProps(["data"])
const cardList = reactive({...props.data})

function parseNumber(value) {
  const num = parseInt(value, 10)
  return isNaN(num) ? 0 : num
}
function modify(data) {
  dataList[0].num = parseNumber(data.total)
  dataList[1].num = parseNumber(data.today.online)
  dataList[2].num = parseNumber(data.click)
  dataList[3].num = parseNumber(data.today.users)

  
  dataList[0].change = calcPercentageChange(data.today.total, data.history.total)
  dataList[1].change = calcPercentageChange(data.today.online, data.history.online)
  dataList[2].change = calcPercentageChange(data.today.click, data.history.click)
  dataList[3].change = calcPercentageChange(data.today.users, data.history.users)
}

watch(() => props.data, (data) => {
  // console.log(data)
  modify(data)
}, { deep: true })

function calcPercentageChange(currentValue: number, historyValue: number): string {
  if (!historyValue || historyValue === 0) return '+0.00%';
  const change = ((currentValue - historyValue) / historyValue) * 100;
  const percentageChange = change.toFixed(2);
  return (change >= 0 ? '+' : '') + percentageChange + '%';
}

const dataList = reactive([
  {
    des: '总访问数',
    icon: '\ue765',
    startVal: 0,
    duration: 1000,
    num: parseInt(cardList?.total, 10) || 0,
    change: calcPercentageChange(cardList?.today.total, cardList?.history.total),
    color: 'linear-gradient(310deg,#3BDBFF,#97de66)'
  },
  {
    des: '在线用户',
    icon: '\ue682',
    startVal: 0,
    duration: 1000,
    num: parseInt(cardList.online, 10),
    change: calcPercentageChange(cardList?.today.online, cardList?.history.online),
    color: 'linear-gradient(310deg,#3BDBFF,#61DAE1)'
  },
  {
    des: '总点击量',
    icon: '\ue672',
    startVal: 0,
    duration: 1000,
    num: parseInt(cardList.click, 10) || 0,
    change: calcPercentageChange(cardList?.today.click, cardList?.history.click),
    color: 'linear-gradient(310deg,#F56A58,#F55540)'
  },
  {
    des: '新用户',
    icon: '\ue686',
    startVal: 0,
    duration: 1000,
    num: parseInt(cardList.users, 10),
    change: calcPercentageChange(cardList?.today.users, cardList?.history.users),
    color: 'linear-gradient(310deg,#A38BE4,#825ee4)'
  }
])
</script>
  
  <style lang="scss" scoped>
    .card {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      width: calc(100% + 20px);
      margin-left: calc(0px - 20px);
      background-color: transparent !important;

      li {
        position: relative;
        box-sizing: border-box;
        width: calc(25% - 20px);
        height: 90px;
        padding: 0 18px;
        margin: 0 0 0 20px;
        background: #f3f3f369;
        border-radius: 14px;
        list-style-type: none;
        &:hover {
          transition: all 0.3s;
          transform: scale(1.03); // 悬停时放大
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加悬停时的阴影效果
        }

        $icon-size: 46px;
  
        .iconfont {
          position: absolute;
          top: 0;
          right: 15px;
          bottom: 0;
          width: $icon-size;
          height: $icon-size;
          margin: auto;
          overflow: hidden;
          font-size: 20px;
          line-height: $icon-size;
          color: #fff !important;
          text-align: center;
          background-color: #2c90ff;
          border-radius: 12px;
        }
  
        .des {
          display: block;
          height: 14px;
          margin-top: 20px;
          font-size: 13px;
          font-weight: 500;
          line-height: 14px;
        }
  
        > div {
          display: flex;
          align-items: center;
  
          .number {
            display: block;
            margin-top: 5px;
            font-size: 28px;
            font-weight: 400;
            // color: var(--art-text-gray-800);
          }
  
          .change {
            display: block;
            margin: 13px 0 0 10px;
            font-size: 13px;
            font-weight: bold;
          }
        }
      }
    }
  </style>